自适应属性 |
您所在的位置:网站首页 › vue pc端自适应 › 自适应属性 |
1. 概述
1.1 版本 报表服务器版本功能变更11.0-- 注1:本移动端自适应方法请参见:[通用]移动端自适应 注2:配置移动端自适应若模板推送显示 PC 端效果,建议将 PC 端自适应属性设置为「默认」或「不自适应」。 1.2 应用场景PC 端,用户预览模板希望能够根据屏幕分辨率自适应。 1.3 功能简介普通报表可设置字体(自适应、不自适应)、表格(横向自适应、双向自适应、不自适应)。 决策报表可设置字体(自适应、不自适应)、报表缩放方式(双向自适应、横向自适应、不自适应)。 注:「数据分析预览」不支持自适应属性。 2. 普通报表 2.1 设置方式点击「模板>PC 端自适应属性」,点击「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」,如下图所示: 默认选中「采用服务器设置」,设置对设计器下所有「采用服务器设置」的模板均生效。如下图所示: 选择「为该模板单独设置」,则「字体」和「表格」自适应设置仅对当前模板生效。如下图所示: 表格不自适应时,字体自适应不生效 表格不自适应表格大小原样输出--表格横向自适应模板横向充满浏览器窗口宽度新页面宽度 = 浏览器宽度 新页面高度 = 浏览器页面宽度 / (老报表页面设置的宽度 / 老报表页面高度) 横向单元格过多时, 单元格只能缩小到一定比例,横向强制分页 表格双向自适应模板双向充满浏览器窗口大小新页面宽度 = 浏览器宽度 新页面高度 = 浏览器高度 单元格过多时, 单元格只能缩小到一定比例,横向强制分页,纵向出现滚动条 注1:一定比例为 0.4,浏览器中报表的宽高 / 正文宽高 < 0.4 注2:参数界面不自适应 注3:当设置有「冻结行」时,行高被限制,双向自适应则不生效,等同于「横向自适应或不自适应」 3. 决策报表 3.1 设置方式点击「模板>PC 端自适应属性」,弹出「PC 端报表块自适应属性」面板,可以选择「采用服务器设置」或「为该模板单独设置」。使用方式与上文一致,请参考本文 2.1 章节。如下图所示: 决策报表中,PC端自适应属性相关设置的逻辑如下表所示: 设置项选项效果说明字体自适应![]() 字体大小会随模板缩放的效果进行缩放 且字体自适应属性作用于模板中所有组件的文字 不自适应![]() ![]() 模板中的所有组件同时在横向和纵向两个方向上充满浏览器窗口 且在不同屏幕分辨率下,内容都会呈现在一页中 横向自适应![]() 模板中的所有组件横向充满浏览器窗口,高度会等比例缩放 在不同屏幕分辨率下,单页显示不全时,纵向会出现滚动条 不自适应![]() 模板按照设计时分辨率大小,原样展示在浏览器窗口 在不同屏幕分辨率下,单页显示不全时,横向或纵向会出现滚动条 注:详情请参见文档 决策报表自适应属性 。 4. 移动端自适应本文的「PC 端自适应属性/PC 端报表块自适应属性」对移动端不生效。 移动端自适应设置请参见:[通用] 移动端自适应 5. 注意事项 5.1 模板设置横向自适应后,预览字体模糊问题描述: 模板设置横向自适应后,预览字体模糊。 解决方案: 横向自适应会预留滚动条,因此右侧出现一点空白,导致字体显示稍微模糊,属于正常效果。 用户若希望字体清楚,可设置双向自适应。 5.2 设置双向自适应后依旧有滚动条问题描述: 决策报表设置 PC 端双向自适应,body 双向自适应,报表块双向自适应后,改变浏览器页面大小,还是会出现滚动条。 原因分析: 属于系统 DPI 问题,分辨率为 1920*1080 ,缩放率为 125% 时,会出现横向滚动条,前台会隐藏该滚动条,但滚动条依然是存在的。 解决方案: 将缩放设置为 100% 。 若因报表块内容过多而导致滚动条产生,可以通过限制内容或隐藏滚动条的方法去除滚动条,请参见:隐藏滚动条 。 5.3 设置冻结后自适应下报表有空白问题描述: 决策报表中,当报表块中设置了冻结,在自适应的情况下,出现报表内容没有撑满全屏幕,四周有空白的问题。 解决方案: 若浏览器缩放或全屏下,报表块下方出现空白问题,可以给 body 添加一个初始化事件,调整显示。事件代码内容如下: $(window).resize(function () {var width = FR.windowWidth; //获取浏览器窗口长度var height = FR.windowHeight;//获取浏览器窗口高度//调整报表form的长宽var from = _g().getWidgetByName('form')if (form.oriWidth === width && form.oriHeight === height) {return;}form.oriWidth = width;form.oriHeight = height;//加载报表内容form.loadContentPane(true);}); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |